<template><n-layout position="absolute">
	<n-layout-header style="height: 64px; padding: 24px" bordered>
		head
	</n-layout-header>
	<n-layout has-sider position="absolute" style="top: 64px; bottom: 32px">
		<n-layout-sider bordered content-style="padding: 24px;">
			<n-menu :options="menuOptions" />
		</n-layout-sider>
		<n-layout content-style="padding: 24px;">
			<router-view/>
		</n-layout>
	</n-layout>
	<n-layout-footer
			bordered
			position="absolute"
			style="height: 32px; padding: 5px"
	>
		foot
	</n-layout-footer>
</n-layout></template>

<script lang="ts" setup>
import { ref , reactive , computed ,  watchEffect , defineProps , withDefaults , defineEmits , defineExpose , useSlots , useAttrs, h} from 'vue';
import {useRouter, useRoute, RouterLink} from "vue-router";
import { NIcon, useMessage } from 'naive-ui'
import type { MenuOption } from 'naive-ui'
import {HomeOutline} from "@vicons/ionicons5";

const menuOptions: MenuOption[] = [
	{
		label: () => h(RouterLink,{to: {name: 'Home',params:{}}},
					{ default: () => 'Home' }),
		key: 'Home',
		icon: ()=>h(NIcon, null, { default: () => h(HomeOutline) })
	},{
		label: () => h(RouterLink,{to: {name: 'Home',params:{}}},
				{ default: () => '刷题' }),
		key: 'Practice Topic',
	},{
	// 包含 文本录入 , 和 题目组录入
		label: () => h(RouterLink,{to: {name: 'ImportTopic',params:{}}},
				{ default: () => '录入题目' }),
		key: 'ImportTopic',
	},{
		// 展示 存储题目组
		// 我希望 存储题目组 与 正在使用的题目组 同步数据
		label: () => h(RouterLink,{to: {name: 'Home',params:{}}},
				{ default: () => '我的题目组' }),
		key: 'My TopicGroups',
	},{
		// 导出 题目组
		label: () => h(RouterLink,{to: {name: 'Home',params:{}}},
				{ default: () => '导出题目组' }),
		key: 'Gun',
	}
]


</script>


<style scoped>

</style>
<!--
	布局估计是这样
	|       head     |
	|----------------|
	|sider|  content |
	|     |          |
	|----------------|
	|     foot       |
	|----------------|
	head 有啥呢? 我不知道,但是没 head ,感觉太秃了 ,可能有 [保存全部题目组在本地,保存某题目在本地,复制某题目组]
	sider 主要是类似于 功能导航 的列表 ,比如 [刷题,导入题目,分析题目(字符串转题目对象(集合)),...]
	content 就内容呗
	foot 记录一些简单消息或信息
-->